<template>

    <div class="app" style = "margin-left:-50px;margin-top:20px">
     <el-form label-width="120px">

     <el-form-item label="新闻标题">
            <el-input v-model="news.title" placeholder=" 示例：守住西部第四！库兹马30分湖人大胜国王"/>
     </el-form-item>
     <el-form-item label="新闻内容">
            <tinymce :height="300" :key="tinymceFlag" v-model="news.content"  />
    </el-form-item>
     <el-form-item label="新闻类型">
      <el-radio v-model="news.type" label="0">普通新闻</el-radio>
      <el-radio v-model="news.type" label="1">热点新闻</el-radio>
      <el-radio v-model="news.type" label="2">置顶新闻</el-radio>
    </el-form-item>
     <el-button  type="primary" @click="publish" style = "margin-left:50%;">发布文章</el-button>
    </el-form>
    </div>
</template>
<script>
  
import Tinymce from '@/components/Tinymce'
export default {
    components:{Tinymce},
    data() {
        return {
            tinymceFlag: 1,
            news:{
                id: '',
                title: '',
                cover: '',
                content: '',
                teamid: '',
                commentCount: '',
                collectionCount: '',
                supportCount: '',
                created: '',
                modified: '',
                type:0,
            }
        }
    },
     beforeDestroy() {
      // 销毁组件前销毁编辑器
      this.tinymce  && this.tinymce.destroy();
    },
     activated() {
      // 每次都给编辑器改变不同的key值使其每次切换页面都重新加载
      this.tinymceFlag++;
    },
     created(){
        this.importCanvesJS()
        this.importCanvesJS2()
        if(this.$route.params && this.$route.params.id) {
           this.getnewsbyId()
        }
    },
    methods:{
        //数据回显
        getnewsbyId(){
        this.$http({
          url: this.$http.adornUrl(`/news/news/info/${this.$route.params.id}`),
          method: 'get'
        }).then(({data}) => {
            console.log(data)
          if(data.news!=null){
              this.news = data.news
              }
             
        })
        },
        //发布文章
        publish(){
        if(this.$route.params && this.$route.params.id){
          this.$http({
          url: this.$http.adornUrl('/news/news/update'),
          method: 'post',
          data:this.news
        }).then(({data}) => {
               this.$message({
                    type:'success',
                    message:'更新新闻成功！'
                });
                this.$router.push({ path: '/news-news' })
        })}
        else{
          this.$http({
          url: this.$http.adornUrl('/news/news/save'),
          method: 'post',
          data:this.news
        }).then(({data}) => {
               this.$message({
                    type:'success',
                    message:'发布新闻成功！'
                });
                this.$router.push({ path: '/news-news' })
        })
        }
        },
        importCanvesJS(){
            var script = document.createElement("script");
            var head = document.getElementsByTagName("head")[0];
            script.src = "../../../../static/tinymce4.7.5/tinymce.min.js"
            head.appendChild(script)
        },
        importCanvesJS2(){
            var script = document.createElement("script");
            var head = document.getElementsByTagName("head")[0];
            script.src = "../../../../static/tinymce4.7.5/langs/zh_CN.js"
            head.appendChild(script)
        },

    },
   
}
</script>
<style scoped>
.tinymce-container{
    line-height: 29px;
}
</style>